<template>
  <div>
      <div class="recommend-title">
        热销推荐
      </div>
      <ul>
         <li class="item border-bottom" v-for="item of recommendList">
            <img class="item-img" :src="item.imgUrl" alt="">
            <div class="item-info">
                <p class="item-title">{{item.title}}</p>
                <p class="item-desc">{{item.desc}}</p>
                <button class="item-button">查看详情</button>
            </div>
         </li>
      </ul>
  </div>
</template>

<script>
export default {
  name:"HomeRecommend",
  props:{
    recommendList:Array
  },
  data () {
    return {
      // itemList:[
      //   {
      //     id:1,
      //     imgUrl:"https://m.360buyimg.com/babel/jfs/t1/1843/1/565/25621/5b920d65Ec84feb21/92ff1315bc01cf15.jpg!q70",
      //     title:"大连海洋公园",
      //     desc:"快来玩啊，很好玩的哈哈哈哈啊哈哈哈哈哈"
      //   },
      //   {
      //     id:1,
      //     imgUrl:"https://m.360buyimg.com/babel/jfs/t24448/177/579790681/46519/9513090e/5b363d61N98539e25.jpg!q70",
      //     title:"大连海洋公园",
      //     desc:"快来玩啊，很好玩的哈哈哈哈啊哈哈哈哈哈"
      //   },
      //   {
      //     id:1,
      //     imgUrl:"https://m.360buyimg.com/babel/jfs/t20248/186/1838388779/28717/4ea27af2/5b363cd7N0bf6f621.jpg!q70",
      //     title:"大连海洋公园",
      //     desc:"快来玩啊，很好玩的哈哈哈哈啊哈哈哈哈哈"
      //   },
      //   {
      //     id:1,
      //     imgUrl:"https://m.360buyimg.com/babel/jfs/t24133/133/2241692838/148586/db30cbd/5b793f46N76e2a272.jpg!q70",
      //     title:"大连海洋公园",
      //     desc:"快来玩啊，很好玩的哈哈哈哈啊哈哈哈哈哈"
      //   },
      //   {
      //     id:1,
      //     imgUrl:"https://m.360buyimg.com/babel/jfs/t24781/13/744292199/26663/722a69b/5b793d00Necdd1458.jpg!q70",
      //     title:"大连海洋公园",
      //     desc:"快来玩啊，很好玩的哈哈哈哈啊哈哈哈哈哈"
      //   },
      //   {
      //     id:1,
      //     imgUrl:"https://m.360buyimg.com/babel/jfs/t25243/287/699441100/202065/a7cc30c9/5b793698N247c5d43.jpg!q70",
      //     title:"大连海洋公园",
      //     desc:"快来玩啊，很好玩的哈哈哈哈啊哈哈哈哈哈"
      //   }
      // ]
    }
  }
}
</script>

<style lang="stylus" scoped>
 @import '~styles/mixins.styl';

.recommend-title
    margin-top :.2rem
    line-height :.8rem
    background:#eee
    text-indent:.2rem

.item
  display:flex
  height :1.9rem
  overflow:hidden

  .item-img
     width :1.7rem
     height :1.7rem
     padding :.1rem
  .item-info
      flex :1
      padding :.1rem
      min-width :0
    .item-title
        line-height :.54rem
        font-size :.32rem
        ellipsis()
    .item-desc
        line-height:.4rem
        color:#ccc
        ellipsis()
    .item-button
        float:right
        margin-right :.2rem
        line-height :.44rem
        margin-top :.16rem
        background :#ff9300
        padding :0 .1rem
        border-radius :.06rem
        color:#fff
</style>
